<script lang="ts" setup>
import ImageUpload from '#/components/ImageUpload/index.vue'
import { useVbenModal } from '@vben/common-ui'
import { IconifyIcon } from '@vben/icons'
import { $t } from '@vben/locales'
import { downloadFileFromUrl } from '@vben/utils'
import { Button, message } from 'ant-design-vue'
import { computed, ref } from 'vue'

const templateName = ref('')

const templateUrl = ref('')

const accept = ref(['xlsx', 'xls'])

const title = ref('')

const maxSize = ref(5)

const maxNumber = ref(1)

let api: (...args: any[]) => Promise<boolean>
const file = ref<any>()

const [Modal, modalApi] = useVbenModal({
    onConfirm: async () => {
        if (!file.value) {
            message.error($t('components.ImportModal.children.noFile'))
            return false
        }

        if (api) {
            modalApi.setState({
                confirmLoading: true
            })
            try {
                const res = await api(file.value)
                if (res) {
                    modalApi.close()
                }
            } finally {
                modalApi.setState({
                    confirmLoading: false
                })
            }
        }
    },
    onOpenChange(isOpen: boolean) {
        if (!isOpen) return
        const data = modalApi.getData<Record<string, any>>() || {}
        if (data.api) {
            api = data.api
        }
        handleDeleteFile()

        title.value = data.title || ''

        templateName.value = data.templateName || ''
        templateUrl.value = data.templateUrl || ''
        if (data.accept) {
            accept.value = data.accept
        }

        if (data.maxSize) {
            maxSize.value = data.maxSize
        }
        if (data.maxNumber) {
            maxNumber.value = data.maxNumber
        }
    },
    title: computed(() => {
        return $t(title.value || 'common.import')
    }),
    class: 'w-[800px] ',
    confirmText: $t('common.import')
})

function handleDownloadTemplate() {
    if (templateUrl.value) {
        downloadFileFromUrl({
            fileName: `${templateName.value}_${Date.now()}`,
            source: templateUrl.value
        })
    }
}

function handleDeleteFile() {
    file.value = undefined
}

async function uploadLoad(data: any) {
    file.value = data?.file
    return {
        data: ''
    }
}
</script>

<template>
    <Modal>
        <div class="import-modal">
            <div class="import-step">
                <div class="step-title">
                    {{ templateUrl ? '1、' : ''
                    }}{{ $t('components.ImportModal.children.stepTwoTip') }} ({{
                        $t('hook.useUpload.supportAccept', [accept.join(',')])
                    }})
                </div>
                <div class="upload-area">
                    <ImageUpload
                        :accept="accept"
                        :help-text="$t('hook.useUpload.supportAccept', [accept.join(',')])"
                        :api="uploadLoad"
                        :max-size="maxSize"
                        :max-number="maxNumber"
                        @delete="handleDeleteFile"
                    />
                </div>
            </div>
        </div>
    </Modal>
</template>

<style lang="less" scoped>
.import-modal {
    padding: 10px 0;
}

.import-step {
    margin-bottom: 20px;

    .step-title {
        margin-bottom: 15px;
        font-size: 14px;
        color: #333;
    }
}

.template-download {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;

    .template-icon {
        font-size: 24px;
        color: #52c41a;
        margin-right: 10px;
    }

    .template-name {
        flex: 1;
        color: #1890ff;
    }
}

.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    background-color: #fafafa;
    cursor: pointer;
    transition: border-color 0.3s;

    &:hover {
        border-color: #1890ff;
    }

    .upload-icon {
        font-size: 48px;
        color: #999;
        margin-bottom: 10px;
    }

    .upload-text {
        color: #666;
        margin-bottom: 15px;
    }
}
</style>
